<template>
  <div class="wutong-pool">
    <div class="header-ban">
      <img class="banner1" src="@/assets/images/banner.png" alt="">
      <img class="banner2" src="@/assets/images/banlogo.png" alt="">
      <div class="title1">高层次人才梧桐库</div>
      <div class="title2">梧桐引才，驾驶未来</div>
    </div>
    <div class="card-box">
      <div class="tips">
        <div class="name-wel">{{myRealName}}</div>
        <div class="tubiao" v-if="myRoleName">
          <span class="rczy">{{ myRoleName }}</span>
          <span class="pxsbx"></span>
        </div>
        <div class="see-intro" @click="jump({ path: '/Approval', query: { status: 0 } })">查看审批列表</div>
      </div>
      <div class="dv1">
        <img class="img1" src="@/assets/images/shijian.png" alt="">
        <span>总览</span>
      </div>
      <div class="dv2">
        <div class="menu-item" @click="jump({ path: '/Approval', query: { status: 1 } })">
          <div class="count">{{talentwshNum}}</div>
          <div class="info">待审批</div>
        </div>
        <div class="menu-item" @click="jump({ path: '/Approval', query: { status: 2 } })">
          <div class="count">{{talentyshNum}}</div>
          <div class="info">已审批</div>
        </div>
        <div class="menu-item" @click="jump({ path: '/Approval', query: { status: 0 } })">
          <div class="count">{{talentZnum}}</div>
          <div class="info">总数</div>
        </div>
      </div>
      <div class="dv3" @click="jump({ path: '/CompanyList' })">
        <div class="fenxi">
          <div class="fx1">单位数据</div>
          <div class="fx2">查看辖区内单位信息</div>
        </div>
        <img class="imgfx" src="@/assets/images/tj1.png" alt="">
      </div>
      <div class="dv3" @click="jump({ path: '/DataStatistics', query: { status: '0' } })">
        <div class="fenxi">
          <div class="fx1">数据统计</div>
          <div class="fx2">查看辖区内单位人才统计数据</div>
        </div>
        <img class="imgfx" src="@/assets/images/tj2.png" alt="">
      </div>
    </div>
    <Loading :loading="loading"></Loading>
  </div>
</template>

<script setup>
import { ref, watch, toRefs, onMounted } from 'vue';
import { getProjectList,getApproveTalentList,getUserInfo } from '@/api/company.js';
import { login } from '@/api/index.js';
import { useRouter } from 'vue-router';
const loading = ref(false);
// localStorage.setItem('token', 'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJhZG1pbiIsInNjb3BlIjpbImFsbCJdLCJzaW5nbGVMb2dpbiI6MiwiZXhwIjoxNzIwNDE1MDEwLCJhdXRob3JpdGllcyI6WyJpc0FkbWluIl0sImp0aSI6ImJFaWhRSWwwaWlXNmZCajF5UWc3dmktem9rRSIsImNsaWVudF9pZCI6ImFkbWluIiwidG9rZW4iOiJsb2dpbl90b2tlbl81Nzk5NTIzMjM0NDc1MzkwMTMifQ.p5KTrVrFuhUUCPwQtC3DUSv1U7mHMXf2-X_2SIoBdE7eLVoh1rvBU9FwZCGSaDhRDperM0MmNL474UFlQ1tb5BIOrdvcOi7iMv6E1w7dczuOCbFIbL1uRunoi1jdAk9OlNlDxfyHaVwxHgpQnZQ4tPK80CUNb93tguX-4AoG3R-SPk7hA_klIyWM9l2pe99oHGAh89DrrJh7VsWV77yMpYwhEKhMs3XrvOMXCurtaqO2iyQsTnzhqsNFlkw563XeUO9NdhApdDkZH7X2UZETi7y7yGwjMuRG8fmUAeeKd9vz6WOUY5HRHwW9WHxlDEmmOThxigagV-cGEIalGSkgtg');

const getCode = () => {
  lx.biz.getAuthCode({
    appId: "1572864-6176768",
    success: function (res) {
      const { authCode } = res;
      console.log('authCode:',authCode);
      resolveToken(authCode)
    },
  fail: function (err) {
      console.log('getAuthCode-err:',err);
    },
  });
}

//  获取并设置 token
const resolveToken = async (authCode) => {
  const params = {
    account: 'admin',
    password: 'a3420497643ef9a58b6cd83961a9f96c',
    origin: 'password',
    client_id: 'admin',
    client_secret: '123456',
    scope: 'all',
    // grant_type: 'taizhengtong',
    grant_type: 'password',
    // code: authCode,
    timestamp: new Date().getTime()
  }
  console.log('params:',params);
  //  登录 获取 token
  const { code, data, msg } = await login(params);
  console.log('code:',code);
  console.log('msg:',msg);
  console.log('data:',data);
  if (code === 200) {
    const token = data.token;
    if (token) {
      console.log('token:',token);
      localStorage.setItem('token', token);
      getTalentysh()
      getTalent()
      getTalentwsh()
      getCurrentUser()
    }
  }else{
  }
}

loading.value = true;
const myRealName = ref('');
const myRoleName = ref('');
const mobilePhone = ref('');
const getCurrentUser= async () => {
  const { code, data } = await getUserInfo();
  loading.value = false;
  if (code === 200) {
    myRealName.value = data.userInfo.userName + '，您好！';
    myRoleName.value = data.userInfo.roleName;
    localStorage.setItem('myRoleName',myRoleName.value)
  }
}

loading.value = true;
const talentZnum = ref(null)
const getTalent = async () => {
  const { code, data } = await getApproveTalentList({
    currentPage: 1,
    pageSize: 20,
    // companyId: "91321200MACTU4PJ4N" 
  });
  loading.value = false;
  if (code === 200) {
    talentZnum.value = data.list.length;
  }
}

loading.value = true;
const talentwshNum = ref(null)
const getTalentwsh = async () => {
  const { code, data } = await getApproveTalentList({
    currentPage: 1,
    pageSize: 20,
    // companyId: "91321200MACTU4PJ4N",
    auditStatus: '0'
  });
  loading.value = false;
  if (code === 200) {
    talentwshNum.value = data.list.length;
  }
}

loading.value = true;
const talentyshNum = ref(null)
const getTalentysh = async () => {
  const { code, data } = await getApproveTalentList({
    currentPage: 1,
    pageSize: 20,
    // companyId: "91321200MACTU4PJ4N",
    auditStatus: '1'
  });
  loading.value = false;
  if (code === 200) {
    talentyshNum.value = data.list.length;
  }
}

onMounted(() => {
  resolveToken()
  // getCode()
  // setTimeout(()=>{         
  //   getTalentysh()
  //   getTalent()
  //   getTalentwsh()
  //   getCurrentUser()
  // },1000)
})

const router = new useRouter();
//  页面跳转
const jump = (options) => {
  router.push(options);
}

</script>

<style lang="scss" scoped>
.wutong-pool {
  box-sizing: border-box;
  height: 100%;
  background: #fff;

  .header-ban{
    position: relative;

    .banner1{
      width: 100vw;
      height: 20rem;
    }
    .banner2{
      position: absolute;
      right: 1rem;
      top: 0.5rem;
      width: 12.3rem;
    }
    .title1{
        position: absolute;
        top: 3.4rem;
        left: 1.9rem;
        font-size: 2rem;
        font-weight: 700;
        color: #4252FF;
    }
    .title2{
        position: absolute;
        top: 6.4rem;
        left: 1.9rem;
        font-size: 1.4rem;
        font-weight: 400;
        color: #076DFF;
    }
  }
  .card-box{
    width: 94%;
    height: 38.7rem;
    border-radius: 5px;
    background: #FFFFFF;
    position: absolute;
    top: 17rem;
    padding: 0.9rem 1.4rem 1.6rem;
    box-sizing: border-box;
    left: 3%;
    box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);

    .tips{
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name-wel{
        font-size: 1.3rem;
        font-weight: 700;
        color: #333333;
        margin-top: 0.5rem;
      }
      .tubiao{
        display: flex;
        align-items: center;
        margin-top: 0.5rem;

        .rczy {
          height: 2rem;
          line-height: 2rem;
          text-align: center;
          background: linear-gradient(90deg, #FFE7C6 0%, #FDEFE3 100%);
          transform: skew(-20deg);
          color: #FF8D1A;
          display: inline-block;
          font-size: 1.1rem;
          padding: 0 0.2rem;
        }
        .pxsbx{
          width: 0.8rem;
          height: 2rem;
          line-height: 2rem;
          text-align: center;
          background: #FDF0E5;
          transform: skew(-20deg);
          display: inline-block;
          margin-left: 0.3rem;
        }
      }
      .see-intro{
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1.4rem;
        color: rgba(14, 83, 204, 1);
        margin-top: 0.5rem;
      }
    }
    .dv1{
      font-size: 1.4rem;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      margin-top: 2rem;

      .img1{
        width: 16px;
        height: 16px;
        margin-right: 1rem;
      }
    }
    .dv2{
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 1.8rem;
      padding-bottom: 2.2rem;
      border-bottom: 1px solid #F2F2F4;

      .menu-item{
        text-align: center;
      }
      .count{
        color: #2A46CC;
        font-size: 2.4rem;
        font-weight: 700;
      }
      .info{
        color: #666666;
      }
    }
    .dv3{
      display: flex;
      align-items: center;
      padding: 0 2rem;
      border-radius: 5px;
      background: #F2F6FF;
      margin-top: 2rem;

      .fenxi{

        .fx1{
          font-size: 1.4rem;
          font-weight: 700;
          color: #0E53CC;
          margin: 0 2rem 0 0.4rem;
        }
        .fx2{
          font-size: 1.2rem;
          font-weight: 400;
          color: #999999;
          margin: 0 2rem 0 0.4rem;
        }

      }
      .imgfx{
        width: 7rem;
        height: 7rem;
        margin: 1rem 0 0 3rem;
      }
    }
  }
}
</style>